<script lang="ts" setup>
import { ref } from 'vue'
import AppLocalePicker from '@/page/Home/comp/AppLocalePicker.vue'
import HomeNav from '@/page/Home/comp/HomeNav.vue'

// const { t } = useI18n()
const open = ref(false)
</script>
<template>
  <header class="sticky top-0 z-50" style="transform: translateZ(0)">
    <div
      class="relative z-50 w-full px-4 mx-auto transition duration-300 border border-transparent xl:mt-4 max-w-7xl sm:px-6 md:px-8 bg-night-blue/75 backdrop-blur-md xl:rounded-xl"
      x-bind:class="{
            'border-transparent xl:border-almost-white/10 shadow-lg': $store.menu.scrolled,
            'border-transparent shadow-none': ! $store.menu.scrolled,
        }"
    >
      <nav class="flex items-center justify-between h-20 lg:h-24">
        <div class="flex items-center justify-between flex-grow">
          <router-link to="/">
            <img
              loading="lazy"
              class="h-8"
              src="@/assets/img/logos/logo.png"
              alt="PLAYTIMEcoin logo"
            />
          </router-link>
          <div class="flex items-center">
            <AppLocalePicker style="margin-right: 28px; height: 28px" />
            <button
              title="Toggle mobile navigation"
              class="flex items-center justify-center w-10 h-10 rounded-xl bg-midnight-blue/75 lg:hidden"
              type="button"
              @click="open = !open"
            >
              <svg
                class="w-6 h-6"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16"
                />
              </svg>
            </button>
          </div>
        </div>
        <HomeNav class="flex-row items-center hidden gap-8 lg:flex"> </HomeNav>
      </nav>
    </div>

    <nav
      class="fixed inset-0 z-20 flex-col h-screen transition lg:flex bg-night-blue"
      x-cloak
      :class="open ? 'translate-y-0' : '-translate-y-full'"
    >
      <HomeNav
        class="flex flex-col items-center justify-center h-full gap-8 text-xl"
      >
      </HomeNav>
    </nav>
  </header>
</template>

<style lang="scss"></style>
